@import '../../style/color.scss';
@import '../../style/domain.scss';
@import '../../style/font.scss';
@import '../../style/mixin.scss';

.side-menu-container {
  position: relative;

  .side-wrap-project {
    box-sizing: border-box;
    width: $side-menu-width;
    height: $side-menu-height;
    background: url("./../../../images/page/left_bg.png") no-repeat 100%;
  }


  .side-menu {
    padding: 48px 42px;
    height:100%;


    .sub-menu-wrap {

      .sub-menu-title {

      }

      .children-menu-wrap {
        display: none;

        .menu-item {
          padding-left: 50px;
        }
      }
    }

    .sub-menu-active {

      .children-menu-wrap {
        display: block;

        .selected-menu-item {
          background: url('../../../images/page/left_active.png') no-repeat ;
          background-size: 100% 54px;
        }
      }

      .menu-item {
        height: 54px;
        color: $normal-font-color;
        line-height: 54px;
      }

      div.menu-item.sub-menu-title {
        height: 54px;
      }
    }

    .menu-item {
      font-size: 18px;
      height: 54px;
      width: 100%;
      line-height: 54px;
      font-family: $medium-font-family;
      color: $unselected-font-color;
      cursor: pointer;
      padding-left: 22px;
    }

    .selected-menu-item {
      color: $normal-font-color;
      background: url('../../../images/page/left_active.png') no-repeat ;
      background-size: 100% 54px;
    }
  }

  .expand-btn {
    position: absolute;
    right: -25px;
    top: 50%;
    width: 40px;
    height: 54px;
    cursor: pointer;
    transform: translateY(-50%);
  }
}

.hide-side-menu {
  .side-wrap-project {
    margin-left: -312px;
  }

  .expand-btn > img {
    transform: scaleX(-1);
  }
}


